/**
* @description:  已完工 =》问题详情
* @author: JiWei
* @remark:
**/
<template>
  <view class="problem-main">
    <nav-bar class="header" back title="问题详情" @goBack="goBack"></nav-bar>
    <view class="problem-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="basic-info">
        <van-field  v-model="problemForm.engName" label="工程名称" placeholder="请选择工程名称"
                    type="textarea" autosize  rows="1"
                    disabled input-align="right"/>
        <van-field v-model="problemForm.stationName" label="站点名称" placeholder="请输入站点名称"
                   input-align="right" disabled/>
        <van-field v-model="problemForm.batchName" label="工程批次" placeholder="请输入工程批次"
                   input-align="right" disabled/>
        <van-field v-model="problemForm.consName" label="现场负责人" placeholder="请输入现场负责人"
                   input-align="right" disabled/>
      </view>
      <!-- 问题装置循环  -->
      <view>
        <!-- 第一层循环  -->
        <van-collapse v-model="problemActiveNames" accordion v-for="(firstItem,firstIndex) in rectificationList" :key="firstIndex">
          <van-collapse-item class="arrive-fold" :name="firstIndex" size="large">
            <template #title>
              <view>
                <text class="title-collap">{{ firstItem.title }}</text>
              </view>
            </template>
            <!-- 第二层循环 -->
            <van-collapse v-model="equipmentActiveNames" accordion v-for="(equItem, equIndex) in firstItem.equList" :key="equIndex">
              <van-collapse-item class="arrive-second" :name="equIndex" size="large">
                <template #title>
                  <view>
                    <text class="small-title">{{ equItem.title }}</text>
                  </view>
                </template>
                <!--   第三层循环  -->
                <view class="rectify-content" v-for="(isNotItem,isNotIndex) in equItem.isNotList" :key="isNotIndex">
                  <van-field disabled v-model="isNotItem.selectName" :label="isNotItem.selectTitle" input-align="right"/>
                  <view class="resctify-main">
                    <!-- 选择是 -->
                    <template v-if="isNotItem.isSelect === 1">
                      <template v-if="isNotItem.oldFlieList !== null">
                        <text>整改前</text>
                        <view class="image-list" v-for="(imgItem,imgIndex) in isNotItem.oldFlieList" :key="imgIndex">
                          <img :src="baseUrl  + imgItem.img" alt="" @click.stop="imageHandle(imgIndex,imgItem, 'PREVIEW',[firstIndex,equIndex,isNotIndex,imgIndex])">
                        </view>
                      </template>
                      <template>
                        <text>整改后</text>
                        <view class="image-list" v-for="(upImgItem, upImgIndex) in isNotItem.fileList" :key="upImgIndex">
                          <img :src="baseUrl  + upImgItem.img" alt="" @click.stop="imageHandle(upImgIndex,upImgItem, 'PREVIEW',[firstIndex,equIndex,isNotIndex,upImgIndex])">
                        </view>
                      </template>
                    </template>
                    <!-- 选择否 -->
                    <template v-if="isNotItem.isSelect === 0">
                      <template v-if="isNotItem.notes !== null">
                        <text>整改前</text>
                        <view class="signintitle">
                          <view class="notes">不执行说明</view>
                          <view class="notestext">
                            <van-field disabled v-model="isNotItem.notes" rows="1" autosize label="" type="textarea" class="textarea" />
                          </view>
                        </view>
                      </template>
                      <template>
                        <text>整改后</text>
                        <view class="signintitle">
                          <view class="notes">不执行说明</view>
                          <view class="notestext">
                            <van-field disabled v-model="isNotItem.notesAfter" rows="1" autosize label="" type="textarea" class="textarea" />
                          </view>
                        </view>
                      </template>
                    </template>
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
          </van-collapse-item>
        </van-collapse>

      </view>

      <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
        <van-swipe>
          <div v-for="(image, index) in files" :key="index">
            <van-swipe-item v-if="image.img" style="text-align: center;">
              <img :src="image.img" />
            </van-swipe-item>
          </div>
        </van-swipe>
      </van-popup>
    </view>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue'
import {Dialog} from "vant";
import wx from "../../../static/common_js/jweixin_1.0.0";
import {merge} from "lodash";
import config from "../../../common/config";

export default {
  name: 'problemRectification',
  components: {navBar,plateTitle },
  props: {},
  data() {
    return {
      baseUrl: '',
      queryOptions: '', // 从路由中获取的参数
      problemForm:{
        engName:'',
        stationName:'',
        batchName:'',
        consName:''
      },
      sfybsg:'',
      problemActiveNames: [],// 具体问题展开
      equipmentActiveNames: [],// 具体设备展开
      currentIndex: [],
      rectificationList:[
        {
          title: '切换装置',
          ID:'1', // 控制是否折叠
          equList:[
            {
              title:'切换装置1', //具体设备名称
              ID:'1', // 是否展开
              isNotList:[
                {
                  title: '安装',
                  selectTitle: '是否安装',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
                {
                  title: '单机调试',
                  selectTitle: '是否单机调试',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
                {
                  title: '联网调试',
                  selectTitle: '是否联网调试',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
				{
				  title: '隐蔽施工',
				  selectTitle: '是否隐蔽施工',
				  selectName: '是',
				  isSelect: 1, // 0-否 1-是
				  oldFlieList:[
				    {},
				    {},
				    {},
				    {},
				  ],
				  fileList: [
				    {
				      img: '',
				      raw: null,
				      type: ''
				    },
				    {
				      img: '',
				      raw: null,
				      type: ''
				    },
				    {
				      img: '',
				      raw: null,
				      type: ''
				    },
				    {
				      img: '',
				      raw: null,
				      type: ''
				    },
				  ],
				  notes: ''
				}
              ], //循环4组
            },
            {
              title:'切换装置2',
              ID:'2',
              isNotList:[
                {
                  title: '安装',
                  selectTitle: '是否安装',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
                {
                  title: '单机调试',
                  selectTitle: '是否单机调试',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
                {
                  title: '联网调试',
                  selectTitle: '是否联网调试',
                  selectName: '否',
                  isSelect: 0, // 0-否 1-是
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: ''
                    }
                  ],
                  notes: ''
                },
				{
				  title: '隐蔽施工',
				  selectTitle: '是否隐蔽施工',
				  selectName: '否',
				  isSelect: 0, // 0-否 1-是
				  fileList: [
				    {
				      img: '',
				      raw: null,
				      type: ''
				    }
				  ],
				  notes: ''
				}
              ], //循环4组
            }
          ]
        },
      ],
      files:[],
      showPreview: false,
      showSelectCovert:false,
      showSelectInstall:false,
      pickerName: '',
      installName: '是否安装',
      covertNameColumns:['是','否'],
      delList:[],
      currentImgIndex:[]
    };
  },
  computed: {},
  watch: {},
  onLoad(option) {
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';
    })
    this.queryOptions = JSON.parse(decodeURIComponent(option.options))
    this.getDetail()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/workbench/projectList/projectDetails?options=' + encodeURIComponent(JSON.stringify(this.queryOptions))+'&entrytype=gclist'
      })
    },
    getDetail() {
      let params = {
        "engId": this.queryOptions.engId,
        "stationId": this.queryOptions.siteId,
        // "statusExam": "2" // 固定传值 2 待审核
      }
      this.$apiRequest.gcgkApi.fillDetailProblem(params).then(res => {
        if(res.code === 0) {
          this.problemForm = res.data.txgcgkDtEng
          this.rectificationList = res.data.rectificationList
          res.data.rectificationList.map((item,index) => {
            this.problemActiveNames.push(item.ID + index)
            item.equList?item.equList.map((ite,index) => {
              this.equipmentActiveNames.push(ite.ID + index)
            }):[]

          })
        }
      })
    },
    onOpenPicker(e,indexs) {
      this.pickerName = e.selectTitle
      this.showSelectCovert = true
      this.currentIndex = indexs
    },
    onConfirm(value) {
      merge(this.rectificationList[this.currentIndex[0]].equList[this.currentIndex[1]].isNotList[this.currentIndex[2]],{selectName:value,isSelect: value == '是' ? 1 : 0})
      this.showSelectCovert = false
    },
    imageHandle(imgIndex, imgItem, handleType,i) {
      this.currentImgIndex = i
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgIndex, imgItem)
      } else if (handleType === 'PREVIEW') {
        this.files = [{img:this.baseUrl + imgItem.img}]
        this.showPreview = true
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          title: `是否确认删除`
        })
            .then(() => {
              this.$set(this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]]
                  .fileList, imgIndex, {
                ...this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList[imgIndex],
                raw: null,
                img: ''
              })
              this.delList.includes(imgItem.type) ? null : this.delList.push(imgItem.type)
            })
            .catch(() => {
            })
      }
    },
    choosePhoto(imgIndex, imgItem) {
      let _this = this
      wx.chooseImage({
        count: 1,
        sourceType: ['album','camera'],
        success: chooseImageRes => {
          wx.getLocalImgData({
            localId: chooseImageRes.localIds[0].toString(),
            success: function (res) {
              const localData = res.localData
              let imageBase64 = ''
              if (localData.indexOf('data:image') == 0) {
                //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData
              } else {
                //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 =
                    'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
              }
              const photoName = `${new Date().getTime()}`
              merge(_this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
                  .fileList[_this.currentImgIndex[3]],{
                img: imageBase64,
                raw: _this.dataURLtoFile(imageBase64,`${photoName}.jpeg`),
                type: imgItem.type
              })
              if (_this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
                  .fileList.length < 9) {  // 最多上传9张 不够添加空对象
                _this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
                    .fileList.push({
                  img: '',
                  raw: null,
                  type: ''
                })
              }
              if (_this.delList.includes(imgItem.type)) {
                _this.delList = _this.delList.filter(item => {
                  if (item === imgItem.type) {
                    return false
                  }
                  return true
                })
              }

            }
          })
        },
        fail: error => {}
      })
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
  }
};
</script>
<style scoped lang="scss">
.problem-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .problem-content {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(30) px2vw(30);
    height: calc(100vh - #{px2vh(230)});
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .basic-info {
      height: auto;
      margin-bottom:px2vh(30);
      background: #fff;
    }
    .title-collap {
      font-size: px2vh(40);
      font-weight: bold;
      color: #666;
    }
    .small-title {
      font-size: px2vh(42);
      color: #417ADC;
      font-weight: bold;
      margin-left: px2vw(50);
    }
    .rectify-content {
      height: auto;

      .resctify-main {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background: #fff;
        margin-top: px2vh(30);
        margin-bottom: px2vh(30);
          text {
            width: 100%;
            margin: px2vh(60) px2vw(48);
            display: block;
            font-size: px2vh(42);
            color: #666;
          }
          .image-list {
            width: px2vw(230);
            height: px2vw(230);
            flex-shrink: 0;
            margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(45) calc((100% - #{px2vw(690)}) / 6);
            img {
              width: px2vw(230);
              height: px2vh(230);
            }
          }
          .upload-button {
            width: px2vw(230);
            height: px2vw(230);
            flex-shrink: 0;
            position: relative;
            background-image: url('../../../static/controlImg/bg_pz.png');
            background-size: 100% px2vw(230);
            margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(60);
            .typetext {
              background-color: #fff;
              position: absolute;
              bottom: px2vh(-70);
              left: calc(50% - #{px2vw(46)});
              color: #dbdbdb;
              font-size: px2vh(42);
              span {
                color: #ff4355;
              }
            }
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .signintitle {
            width: 100%;
            flex-direction: column;
            font-size: px2vh(42);
            color: #666666;
            padding-bottom: px2vh(60);
            box-sizing: border-box;
            .notes {
              padding: px2vh(54) 0;
              box-sizing: border-box;
              border-bottom: 2px dashed #f2f6fa;
              margin: 0 px2vh(50) px2vh(54);
              span {
                color: #ff4355;
              }
            }
            .notestext {
              background-color: #fafafa;
              margin: 0 px2vh(50);
              /deep/.van-cell {
                background-color: #fafafa;
              }
            }
          }
      }
    }
  }
}
.van-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .van-swipe {
    width: 100%;
    height: 60%;

    .van-swipe-item {
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}
.arrive-fold /deep/.van-cell {
  background: #F2F6FA;
}
/deep/.van-collapse-item__content {
  padding: 0 0 !important;
  background: #F2F6FA;
}
/deep/.van-cell--large {
  padding: px2vh(16) px2vw(20);
}
.arrive-second /deep/.van-cell {
  background: #fff;
}
/deep/.van-hairline--top-bottom {
  margin-bottom: px2vh(20);
}
/deep/.van-collapse-item__content {
  padding-left: px2vw(30);
}
/deep/.van-button {
  width: 100%;
  height: px2vh(120);
  color: #fff;
  float: left;
  margin-bottom: px2vh(20);
  background-color: #417ADC;
  border: 1px solid #417ADC;
  border-radius: px2vh(60);
}
/deep/ .van-field__control:disabled {
  color: #333;
  -webkit-text-fill-color: #333;
}
</style>
